<template>
  <div class="formItemInfo">
    <template v-if="['text', 'textarea', 'number'].includes(formItem.type)">
      <el-input :type="formItem.type"
                v-model.trim="formItemVal"
                :readonly="!!formItem.readonly"
                :disabled="!!formItem.disabled"
                :autocomplete="formItem.autocomplete || 'off'"
                :placeholder="`请输入${formItem.label}`"
                :maxlength="formItem.maxlength || 50"
                :autosize="formItem.autosize"
                clearable
                show-word-limit />
    </template>
    <template v-if="['select'].includes(formItem.type)">
      <el-select v-model.trim="formItemVal"
                 placeholder="请选择"
                 clearable
                 :multiple="formItem.multiple || false"
                 :disabled="!!formItem.readonly || !!formItem.disabled"
      >
        <el-option
          v-for="dict in dictOptions"
          v-if="!formItem.disabledList || !formItem.disabledList.includes(dict.value)"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
    </template>
    <template v-if="['date', 'month', 'datetime'].includes(formItem.type)">
      <el-date-picker
        v-model="formItemVal"
        :type="formItem.type"
        :format="formItem.format"
        :readonly="!!formItem.readonly"
        :value-format="formItem.format"
        clearable
        placeholder="请选择日期">
      </el-date-picker>
      <!--            :value-format="formItem.format"-->
    </template>
    <template v-if="['time'].includes(formItem.type)">
      <el-time-picker
        v-model="formItemVal"
        :picker-options="formItem.pickerOptions"
        :format="formItem.format"
        :value-format="formItem.format"
        :readonly="!!formItem.readonly"
        clearable
        placeholder="请选择">
      </el-time-picker>
    </template>
    <template v-if="['switch'].includes(formItem.type)">
      <el-switch
        v-model="formItemVal"
        :active-value="Object.keys(formItem).includes('onVal') ? formItem.onVal : 'Y'"
        :inactive-value="Object.keys(formItem).includes('offVal') ? formItem.offVal : 'N'"
        :disabled="!!formItem.readonly || !!formItem.disabled"
      />
    </template>
    <template v-if="['editor'].includes(formItem.type)">
      <Editor :disabled="!!formItem.readonly || !!formItem.disabled" ref="inputValueRef" v-model="formItemVal" :init="editorInit" v-if="formItem.visible" />
    </template>
    <template v-if="['file'].includes(formItem.type)">
      <template v-if="!!formItemVal">
        <video v-if="!!isVideo" ref="video" style="width: 210px; height: 120px;" controls muted preload loop :src="formItemVal"></video>
        <el-image v-else style="width: 120px; height: 120px;background-color: #f5f7fa;" :src="formItemVal" :preview-src-list="[formItemVal]" fit="contain"></el-image>
      </template>
      <el-upload
        v-if="!formItem.readonly && !formItem.disabled"
        class="upload-demo filter-item"
        ref="contentFiles"
        drag
        action="#"
        :http-request="(file) => $_uploadFile(file, formItem)"
        :multiple="formItem.multiple"
        :before-upload="(file) => $_beforeHandleSuccess(file, formItem)"
        :on-exceed="$_handleExceed"
        :on-progress="() => MX_uploadLoading = true"
        :show-file-list="true"
        :on-remove="$_remove"
        :file-list="MX_fileList"
        :limit="formItem.limit ? formItem.limit : 1">
        <i class="el-icon-upload" />
        <div v-loading.fullscreen.lock="MX_uploadLoading" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">{{!!formItem.fileTypes ? `注：仅支持上传${formItem.fileTypes.join(' / ')}文件，且不超过${formItem.fileSize || 5}MB` : `注：最大可上传${formItem.fileSize || 5}M的文件`}}</div>
      </el-upload>
    </template>
    <template v-if="['radioGroup'].includes(formItem.type)">
      <el-radio-group v-model="formItemVal">
        <el-radio-button v-for="v in formItem.options" :key="v.value" :label="v.value">{{v.label}}</el-radio-button>
      </el-radio-group>
    </template>
    <template v-if="['radio'].includes(formItem.type)">
      <el-radio-group v-model="formItemVal">
        <el-radio v-for="v in formItem.options" :key="v.value" :label="v.value">{{v.label}}</el-radio>
      </el-radio-group>
    </template>
  </div>
</template>

<script>
import commonUpload from "@/utils/mixins/investment/commonUpload";
import Editor from "@tinymce/tinymce-vue";
import frameworkApi from "@/framework/api/taskLog";

export default {
  name: "FormTemplate",
  mixins: [ commonUpload ],
  components: { Editor },
  props: {
    value:{
      type: String | Number | Boolean,
    },
    formItem: {
      type: Object,
      default: {}
    }
  },
  data() {
    return{
      formItemVal: '',
      dictOptions: [],
    }
  },
  watch: {
    formItem(val){
      if (!!val.dictOptions){
        this.dictOptions = val.dictOptions
      }else{
        this.getDicts(val.dictTypeCode)
      }
      if (!val.visible){
        this.MX_fileList = []
      }
    },
    value(val){
      this.formItemVal = val
    },
    formItemVal(val){
      if (val !== this.value) this.$emit('input', val)
    }
  },
  computed: {
    editorInit() {
      return {
        menubar: false,
        branding: false,
        // language_url: '/Tinymce/zh_CN.js',
        language: "zh_CN",
        // skin_url: '/tinymce/skins/ui/animal',
        height: 500,
        body_class: "panel-body ",
        plugins: [
          "code",
          "print",
          "preview",
          "fullscreen",
          "paste",
          "searchreplace",
          "save",
          "autosave",
          "link",
          "autolink",
          "image",
          "imagetools",
          "media",
          "table",
          "codesample",
          "lists",
          "advlist",
          "hr",
          "charmap",
          "emoticons",
          "anchor",
          "directionality",
          "pagebreak",
          "quickbars",
          "nonbreaking",
          "visualblocks",
          "visualchars",
          // 'wordcount'
        ].join(" "),
        toolbar: [
          "fullscreen",
          "preview",
          "code",
          "|",
          "undo",
          "redo",
          "|",
          "forecolor",
          "backcolor",
          "|",
          "bold",
          "italic",
          "underline",
          "strikethrough",
          "|",
          "alignleft",
          "aligncenter",
          "alignright",
          "alignjustify",
          "|",
          "outdent",
          "indent",
          "|",
          "numlist",
          "bullist",
          "|",
          "formatselect",
          "fontselect",
          "fontsizeselect",
          "|",
          "link",
          "image",
          "media",
          "emoticons",
          "charmap",
          "anchor",
          "pagebreak",
          "codesample",
          "|",
          "ltr",
          "rtl",
        ].join(" "),
        draggable_modal: true,
        toolbar_mode: "sliding",
        images_upload_handler: (blobInfo, success) => {
          // success('data:image/jpeg;base64,' + blobInfo.base64())
          // 改为自定义上传
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          formData.append("secretFlag", "N");
        },
        file_picker_types: "media",
        file_picker_callback: () => {},
      };
    },
    isVideo(){
      return this.formItem.fileTypes.includes('mp4')
    }
  },
  mounted() {
    if (Object.keys(this.formItem).length){
      this.formItemVal = this.value
      if (!!this.formItem.dictOptions){
        this.dictOptions = this.formItem.dictOptions
      }else{
        this.getDicts(this.formItem.dictTypeCode)
      }
    }
  },
  methods: {
    getDicts(dictTypeCode){
      if (!dictTypeCode || !!this.dictOptions.length) return
      frameworkApi.getDictList({ dictTypeCode }).then((res) => {
        let list = res.data
        this.dictOptions = list.map(v => {
          v.value = v.dictCode
          v.label = v.dictName
          return v
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
::v-deep .el-upload{
  width: 100%;
  .el-upload-dragger{
    width: 100%;
  }
}
</style>
